<%@ page import="dart.Person" %>
${people = Person.findAllByEnabled(true, [sort: "displayName", order: "asc"])}

<html>
<head>
	<title>Start a New Game</title>
	<meta name="layout" content="dart"/>
	<dart:css src="gamePlay/newGame.css"/>
	<g:javascript src="gamePlay/newGame.js"/>
</head>
<body onLoad="elements.load();">
<input type="hidden" id="numPeople" value="${people.size()}">
<h1>Start a New Game</h1>

<table id="playerSelect">
	<g:each in="${people}" var="person" status="num">
		<tr>
			<td id="order${num}" class="order"></td>
			<td>
				<a id="person${num}" class="person"
						onclick="people.click(${num}, ${person.id}, '${person.style()}');">
					${person.displayName}
				</a>
			</td>
		</tr>
	</g:each>
</table>

<g:form method="post">
	<table id="gameSettings" cellspacing="0">
		<tr>
			<td class="action" onClick="click(gameStyle);">Game Style</td>
			<td id="gameStyleElem"></td>
		</tr>
		<tr class="odd">
			<td>Starting Score</td>
			<td><g:textField name="startingScore" value="301"/></td>
		</tr>
		<tr>
			<td >Ending Score</td>
			<td><g:textField name="endingScore" value="0"/></td>
		</tr>
		<tr class="odd">
			<td class="action" onClick="click(scoreLimit);">Score Limit</td>
			<td id="scoreLimitElem"></td>
		</tr>
		<tr>
			<td class="action" onclick="click(forceAllThrows);">Force All Throws?</td>
			<td id="forceAllThrowsElem"></td>
		</tr>
		<tr class="odd">
			<td class="action" onClick="click(endingStyle);">Ending Style</td>
			<td id="endingStyleElem"></td>
		</tr>
		<tr>
			<td class="action" onClick="click(penalties);">Penalties</td>
			<td id="penaltiesElem"></td>
		</tr>
		<tr id="harshScaleRow" class="odd">
			<td >Harsh Penalty Scale</td>
			<td id="harshScaleElem"><g:textField name="harshScale" value="0.05"/></td>
		</tr>
	</table>

	<g:actionSubmit onclick="return trySubmit();" value="Ok" action="create"/>
	<span id="hidden-players" style="display:none;"></span>
</g:form>
</body>
</html>